<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src=".././static/js/public-head.js"></script>
    <style type="text/css">
        .layui-form-label{
            padding-left: 9px;
            /*padding-right: 9px;*/
        }
        .layui-colla-content{
            padding: 5px;
        }
        .layui-badge{
            cursor:pointer;
        }
        .layui-badge-rim{
            padding: 0px;
        }
        .layui-badge{
            margin: 0px;
        }

        .layui-bg-gray:hover{
            background-color:red!important;color:#666!important
        }
        .layui-fluid{
            padding: 0px;
        }
        .rpt-light{
            border:1px dashed #000;
        }
        .rpt-light:hover{border:1px solid #FF0000}
    </style>
</head>
<body style="padding: 1px">
<div class="layui-fluid" >
    <div class="layui-row row-sample" >
        <div class="layui-col-md3" style="padding:2px" >
            <div class="layui-collapse" lay-accordion >
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">Report管理</h2>
                    <div class="layui-colla-content   layui-show">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input  type="text"   name="searchStr" id="searchStr" placeholder="输入关键字" autocomplete="off" class="layui-input">
                            </div>
                            <button class="layui-btn" id="report-add">新增</button>
                        </div>
                        <hr>
                        <table id="report-tb" lay-filter="report-tb"></table>
                    </div>
                </div>

                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">页面布局</h2>
                    <div class="layui-colla-content">
                        <form lay-filter="report-layout" class="layui-form">
                            <div class="layui-form-item">
                                <input type="radio" name="layout" lay-filter="layout" value="2" title="6：6" >
                                <input type="radio" name="layout" lay-filter="layout" value="3" title="3：9">
                                <input type="radio" name="layout" lay-filter="layout" value="4" title="4：8" >
                                <input type="radio" name="layout" lay-filter="layout" value="5" title="5：7">
                                <input type="radio" name="layout" lay-filter="layout" value="6" title="7：5" >
                                <input type="radio" name="layout" lay-filter="layout" value="7" title="8：4">
                                <input type="radio" name="layout" lay-filter="layout" value="8" title="9：3" ><br>
                                <input type="radio" name="layout" lay-filter="layout" value="1" title="单页面">
                                <input type="radio" name="layout" lay-filter="layout" value="2-1" title="其他1" >
                                <input type="radio" name="layout" lay-filter="layout" value="2-2" title="其他2" >
                                <input type="radio" name="layout" lay-filter="layout" value="2-3" title="其他3" >
                            </div>
                        </form>
                    </div>
                </div>
                <div class="layui-colla-item">
                    <h2 class="layui-colla-title">Panel配置</h2>
                    <div class="layui-colla-content" id="xdWidget-panel-tb-colla">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input  type="text"   name="panelName" id="panelName" placeholder="输入关键字或ID" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <hr>
                        <div id="rpt-panel-box"></div>
                    </div>
                </div>
                <div class="layui-colla-item ">
                    <h2 class="layui-colla-title">Form元素</h2>
                    <div class="layui-colla-content">
                        <div class="layui-inline">
                            <a class="layui-btn  layui-btn-sm" id="rpt-add-param-bt">全部添加</a>
                        </div>
                        <hr>
                        <div id="rpt-param-box"></div>
                    </div>
                </div>
            </div>
            <hr>
            <div class="layui-form-item">
                <div align="center">
                    <button class="layui-btn" lay-submit="" lay-filter="rpt-save-bt">保存并发布</button>
                    <button class="layui-btn" lay-submit="" lay-filter="rpt-preview-bt">预览</button>
                </div>
            </div>
        </div>
        <input type="hidden" name="rptId" id="rptId" value="">
        <input type="hidden" id="layout" value="">
        <div class="layui-col-md9 rpt-config" style="padding: 3px" >
            <div class="rpt-layui-row-header"  id="report-layout-header"  >
                <div class="layui-form-item  rpt-light">查询条件</div>
            </div>
            <hr>
            <div class="rpt-layui-row-body" id="report-layout-body"   >

            </div>
        </div>
    </div>

</div>

</body>
</html>

<script type="text/javascript">

    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use([ 'table','form','formSelects' ,'element','laydate','laytpl','util' ], function() {
        var $ = layui.$;
        var form = layui.form;
        var formSelects = layui.formSelects;
        var layer = layui.layer;
        var table = layui.table;
        var element = layui.element;
        var laydate = layui.laydate;
        var laytpl = layui.laytpl;
        var layuiutil = layui.util
        var layindex;

        $("#searchStr").bind('input propertychange', function() {
            table.reload("report-tb")
        });

        var tableOption = {
            elem: '#report-tb'
            ,url: basePath + '/xdWidgetReport/query'
            ,where:{searchStr:function(){return $("input[name='searchStr']").val()}}
            ,method:"post"
            ,toolbar:false
            ,title:"系统参数配置"
            ,defaultToolbar:false//['filter', 'print']
            ,cols: [[
                {title:"选择", type:"radio"},
                {title:"Report ID",field:"ID"},
                {field:'NAME', minWidth:120, title: 'Report名称', sort:true,edit:"text"},
                {title: "操作",width:60,templet:function(d){
                    return '<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>'
                }}
            ]]
            ,page: {groups:3,layout:['prev', 'page', 'next','refresh']}
            ,height: 'full-260'
            ,done:function(a,b,c){
                $("#rptId").val("")
                rptPageUtil.initLayoutContent("")
                rptPageUtil.getRptNotPanel()
                rptPageUtil.getRptNotParam()
            }
        }

        table.render(tableOption)
        //监听编辑report名称
        table.on('edit(report-tb)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"
            $.getJSON(basePath+"/xdWidgetReport/edit",{name:obj.value,id:obj.data.ID},function(rst){
                if(rst.code !=0){
                    layer.alert(rst.msg)
                    table.render(tableOption)
                }
            })
        });



        $("#panelName").bind('input propertychange', function() {
            rptPageUtil.getRptNotPanel()
        });

        //新增Report
        $("#report-add").click(function(){
            //例子1
            layer.prompt({title: 'Report名称'},function(value, index, elem){
                if(value == "" || value == null){
                    layer.msg("名称不能为空")
                    return
                }
                $.getJSON(basePath+"/xdWidgetReport/add",{name:value},function(rst){
                    if(rst.code !=0){
                        layer.alert(rst.msg)
                    }else{
                        layer.close(index);
                        table.render(tableOption)
                    }
                })
            });
        })


        //监听单选、删除
        table.on("tool(report-tb)",function(obj){
            layer.confirm('确定要删除吗？', {icon: 3, title:'提示'}, function(index){
                $.getJSON(basePath+"/xdWidgetReport/del",{id:obj.data.ID},function(rst){
                    if(rst.code !=0){
                        layer.alert(rst.msg)
                    }else{
                        table.render(tableOption)
                    }
                })
                layer.close(index);
            });
        })

        //监听选中rpt
        table.on("radio(report-tb)", function (obj) {
            var data = obj.data
            var rptId = data.ID
            var layout = data.LAYOUT
            $("#rptId").val(rptId)
            rptPageUtil.setLayoutForm(rptId,form)
            $(".rpt-layui-row-body").css("height",$(".layui-col-md3").height() - $(".rpt-layui-row-header").height()-50)
            rptPageUtil.getRptNotPanel()
            rptPageUtil.getRptNotParam()
            rptPageUtil.initLayoutContent(rptId)
        })

        //监听layout更改
        form.on("radio(layout)", function (obj) {
           // console.log(obj)
            var rptId = $("#rptId").val()
            if(rptId == null || rptId ==""){
                layer.msg("请选择Report")
                return
            }
            var layout = obj.value

            layer.confirm( "更改布局将删除已配置模板内容?",{icon:3},function(index){
                $.getJSON(basePath+"/xdWidgetReport/editLayout",{rptId:rptId,layout:layout},function(rst){
                    if(rst.code!=0){
                        layer.alert(rst.msg)
                        rptPageUtil.setLayoutForm(rptId,form)
                    }else{//更改布局成功后，需要将主页面更新
                        $("#report-layout-body").html( $("#layout-"+layout).html() || "布局暂未开发完成")
                        $("#report-layout-header .rpt-light").html("查询条件")

                        rptPageUtil.getRptNotPanel()
                        rptPageUtil.getRptNotParam()
                    }
                })
                layer.close(index);
            },function(index){
                rptPageUtil.setLayoutForm(rptId,form)
                layer.close(index)
            })

            return;
        })

        //监听添加查询条件
        $("#rpt-add-param-bt").click(function () {
            var rptId = $("#rptId").val()
            if(rptId == null || rptId ==""){
                layer.msg("请选择Report")
                return
            }
            if( $(".rpt-layui-row-header .rpt-light").text() == "查询条件"){
                $(".rpt-layui-row-header .rpt-light").html("")
            }
            $("#rpt-param-box").children("span").each(function(index,item){
                var paramId = $(item).attr("param-id")
                var classFlag = $(item).attr("class-flag")
                $(".rpt-layui-row-header .rpt-light").append('<span  class-flag="'+classFlag+'" class="layui-badge-rim xd-rim" param-id="'+paramId+'" >' +
                        '<span  class="layui-badge layui-bg-gray" lay-submit lay-filter="rpt-param-update" flag="-1"><</span>'+
                        '<span  class="layui-badge layui-bg-cyan">'+$(item).text()+'</span>' +
                        '<span  class="layui-badge layui-bg-gray" lay-submit lay-filter="rpt-param-update" flag="del">×</span></span>')
            })
            $(".xd-rim").css({"margin":"3px"})
            rptPageUtil.updateRptParamRel(rptId,"add")//新增
        })

        //监听删除、排序 Pannel
        form.on("submit(rpt-panel-update)",function(obj){
            var flag = $(obj.elem).attr("flag")
            var rptId = $("#rptId").val()
            var panelId = $(obj.elem).parent().attr("id")
            if(flag == "del"){
                rptPageUtil.updateRptPanelRel(rptId,"del",panelId,$(obj.elem).parent())
            }else if(flag == "-1"){//排序，交换顺序
                $.getJSON(basePath+"/xdWidgetReport/updateRptPanelRel",{rptId:rptId,relType:"-1",panelId:panelId},function(rst){
                    if(rst.code !=0){
                        layer.msg(rst.msg)
                    }else{
                        $(obj.elem).parent().insertBefore($(obj.elem).parent().prev())
                        var body = $("#report-layout-body")
                        rptPageUtil.updateRptTempHtml(rptId,"tempBody",body.html())
                    }
                })
            }
            return false
        })


        //监听删除、排序 查询条件
        form.on("submit(rpt-param-update)",function(obj){
            var flag = $(obj.elem).attr("flag")
            var rptId = $("#rptId").val()
            var paramId = $(obj.elem).parent().attr("param-id")
            var classFlag = $(obj.elem).parent().attr("class-flag")
            if(flag == "del"){//(rptId,relType,classFlag,paramId)
                rptPageUtil.updateRptParamRel(rptId,"del",classFlag,paramId,$(obj.elem).parent())

            }else if(flag == "-1"){//排序，交换顺序
                $.getJSON(basePath+"/xdWidgetReport/updateRptParamRel",{rptId:rptId,relType:"-1",classFlag:classFlag,paramId:paramId},function(rst){
                    if(rst.code !=0){
                        layer.msg(rst.msg)
                    }else{
                        $(obj.elem).parent().insertBefore($(obj.elem).parent().prev())
                        var body = $("#report-layout-header")
                        rptPageUtil.updateRptTempHtml(rptId,"tempHeader",body.html())
                        rptPageUtil.getRptNotParam()
                    }
                })
            }
            return false
        })

        //监听预览按钮
        form.on("submit(rpt-preview-bt)",function(obj){
            var rptId = $("#rptId").val()
            if(rptId == null || rptId == ""){
                layer.msg("请选择Report")
                return
            }
            commonUtil.openPage("预览","preViewRpt.gsp?rptId="+rptId,"100%","100%")
            return false
        })

        //监听保存
        form.on("submit(rpt-save-bt)",function(obj){
            var rptId = $("#rptId").val()
            if(rptId == null || rptId == ""){
                layer.msg("请选择Report")
                return
            }
            $.getJSON(basePath+"/xdWidgetReport/save",{rptId:rptId},function(rst){
                if(rst.code!=0){
                    layer.alert(rst.msg)
                }else{
                    layer.msg(rst.msg)
                }
            })
            return false
        })

    })


var rptPageUtil = {
    setLayoutForm:function(rptId,form){//设置layout值
        $.getJSON(basePath+"/xdWidgetReport/getOne",{rptId:rptId}, function (rst) {
            if(rst.code!=0){
                layer.msg(rst.msg)
            }else{
                var layout = rst.data.layout||"1"
                form.val("report-layout",{"layout":rst.data.layout})
            }
        })
    },
    getRptNotParam:function(){//获取rpt未配置查询条件
        var rptId = $("input[name='rptId']").val()
        if(rptId == null || rptId == ""){
            $("#rpt-param-box").html("无数据")
            return
        }
        $.post(basePath + '/xdWidgetReport/getRptNotParam',{rptId:rptId},function(rst){
            if(rst.code !=0){
                //layer.alert(rst.msg)
                $("#rpt-panel-box").html("搜索关键字异常!")
            }else{
                var fieldHtml = ""
                $.each(rst.data,function(index,item){
                    fieldHtml +='<span  class="layui-badge layui-bg-cyan"  class-flag="'+item.CLASS_FLAG+'"  param-id="'+item.ID+'">'+item.LABEL+'('+item.XD_WIDGET+')</span>&nbsp;'
                })
                $("#rpt-param-box").html(fieldHtml||"无Form元素绑定")
            }
        },"json")
    },
    getRptNotPanel:function(){//获取rpt未配置的panel
        var rptId = $("input[name='rptId']").val()
        var panelName = $("input[name='panelName']").val()
        if(rptId == null || rptId == ""){
            $("#rpt-panel-box").html("无数据")
            return
        }
        $.post(basePath + '/xdWidgetReport/getWidgetReportPanel',{rptId:rptId,panelName:panelName,limit:20},function(rst){
            if(rst.code !=0){
                //layer.alert(rst.msg)
                $("#rpt-panel-box").html("搜索关键字异常!")
            }else{
                var fieldHtml = ""
                $.each(rst.data,function(index,item){
                    fieldHtml +='<span  draggable="true" ondragstart="drag(event)" class="layui-badge layui-bg-cyan" panel-id="'+item.ID+'">'+item.NAME+'('+item.WIDGET_NAME+')</span>&nbsp;'
                })
                $("#rpt-panel-box").html(fieldHtml||"无Panel数据")
            }
        },"json")
    },
    updateRptTempHtml: function (rptId,field,script) {//更新临时脚本:field数据库字段名称，script：html脚本
        $.post(basePath + '/xdWidgetReport/updateRptTempHtml',{rptId:rptId,field:field,script:script},function(rst){
            if(rst.code !=0){
                layer.alert(rst.msg)
            }else{
                //<div class="layui-form-item  rpt-light">查询条件</div>
                if($(script).text()==null || $(script).text()== ""){
                    $("#report-layout-header").html('<div class="layui-form-item  rpt-light">查询条件</div>')
                }
            }
        },"json")
    },

    updateRptPanelRel: function (rptId,relType,panelId,elem) {//rpt 关联 panel 关系：add、del
        //relType in (add、del、order)
        //data in (panelId , panelId ,panelId)
        $.post(basePath + '/xdWidgetReport/updateRptPanelRel',{rptId:rptId,relType:relType,panelId:panelId},function(rst){
            if(rst.code !=0){
                layer.alert(rst.msg)
            }else{

                if(relType == "del"){
                    $(elem).remove()
                }
                var body = $("#report-layout-body").clone()
                //body.find(".rpt-light").removeAttr("style")
                rptPageUtil.updateRptTempHtml(rptId,"tempBody",body.html())
                rptPageUtil.getRptNotPanel();
                rptPageUtil.getRptNotParam()
            }
        },"json")
    },

    updateRptParamRel:function(rptId,relType,classFlag,paramId,elem){//更新rpt-param关系
        $.getJSON(basePath+"/xdWidgetReport/updateRptParamRel",{rptId:rptId,relType:relType,classFlag:classFlag,paramId:paramId},function(rst){
            if(rst.code!=0){
                layer.msg(rst.msg)
            }else{
                if(relType == "del"){
                    $(elem).remove()
                }
                rptPageUtil.updateRptTempHtml(rptId,"tempHeader",$("#report-layout-header").html()) //更新html
                rptPageUtil.getRptNotParam()
            }
        })
    },

    initLayoutContent:function(rptId){

        if(rptId == null || rptId == ""){
            $("#report-layout-header  .rpt-light").html("查询条件")
            $("#report-layout-body").html("页面主内容区")
            return
        }

        $.getJSON(basePath+"/xdWidgetReport/getOne",{rptId:rptId}, function (rst) {
            if(rst.code!=0){
                layer.msg(rst.msg)
            }else{
                var layout = rst.data.layout||"1"
                if(rst.data.tempHeader == null || rst.data.tempHeader == "" ){
                    $("#report-layout-header .rpt-light").html("查询条件")
                }else if($(rst.data.tempHeader).text()  == "" || $(rst.data.tempHeader).text()  == null){
                    $("#report-layout-header").html('<div class="layui-form-item  rpt-light">查询条件</div>')
                }else{
                    $("#report-layout-header").html(rst.data.tempHeader)
                }

                if(rst.data.tempBody == null || rst.data.tempBody == ""){
                    switch (layout){//页面布局
                        case "1":
                            $("#report-layout-body").html($("#layout-1").html())
                            break;
                    }
                }else{
                    $("#report-layout-body").html(rst.data.tempBody )
                }
            }
        })
    }
}



function drag(ev)
{//拖拽事件
    //console.log($(ev.target).prop("outerHTML"))
    ev.dataTransfer.setData("Html",$(ev.target).prop("outerHTML"));
}

function allowDrop(event){
    //允许拖拽
    event.preventDefault()
}

function drop(ev)
{//放置目标位置事件
    ev.preventDefault();
    var data= $(ev.dataTransfer.getData("Html"));
    var text = data.html()
    if($.trim($(ev.target).html())=="页面主内容区"){
        $(ev.target).html("")
    }
    var rptId = $("#rptId").val()
    var panelId = $(data).attr("panel-id")
    $(ev.target).append('<span class="layui-badge-rim xd-rim" id="'+panelId+'" >' +
            '<span  class="layui-badge layui-bg-gray" lay-submit lay-filter="rpt-panel-update" flag="-1"><</span>'+
            '<span  class="layui-badge layui-bg-cyan">'+text+'</span>' +
            '<span  class="layui-badge layui-bg-gray" lay-submit lay-filter="rpt-panel-update" flag="del">×</span></span>')
    $(".xd-rim").css({"margin":"3px"})
    rptPageUtil.updateRptPanelRel(rptId,"add",panelId)
}

</script>


<script type="text/html" id="layout-1">
    <div class="layui-row" style="height: 100%">
        <div class="layui-col-md12 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>


<script type="text/html" id="layout-2">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md6 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md6 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>

<script type="text/html" id="layout-3">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md9 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>


<script type="text/html" id="layout-4">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md4 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md8 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>

<script type="text/html" id="layout-5">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md5 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md7 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>


<script type="text/html" id="layout-6">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md7 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md5 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>

<script type="text/html" id="layout-7">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md8 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md4 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>


<script type="text/html" id="layout-8">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md9 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>

        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%">
            页面主内容区
        </div>
    </div>
</script>


<script type="text/html" id="layout-2-1">
    <div class="layui-row " style="height: 100%" >
        <div class="layui-col-md8"  style="height: 100%">

            <div class="layui-row" style="height:100%">
                <div class="layui-col-md6 rpt-light"
                     ondragover="allowDrop(event)"
                     ondrop="drop(event)"
                     style="height: 50%;overflow:auto;">
                    页面主内容区
                </div>

                <div class="layui-col-md6 rpt-light"
                     ondragover="allowDrop(event)"
                     ondrop="drop(event)"
                     style="height: 50%;overflow:auto;">
                    页面主内容区
                </div>

                <div class="layui-col-md12 rpt-light"
                     ondragover="allowDrop(event)"
                     ondrop="drop(event)"
                     style="height: 50%;overflow:auto;">
                    页面主内容区
                </div>
            </div>
        </div>

        <div class="layui-col-md4 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 100%;">
            页面主内容区
        </div>
    </div>
</script>

<script type="text/html" id="layout-2-2">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md3 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md12 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 40%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md6 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md6 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 30%;overflow:auto;">
            页面主内容区
        </div>
    </div>
</script>



<script type="text/html" id="layout-2-3">
    <div class="layui-row layui-col-space5" style="height: 100%">
        <div class="layui-col-md12 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 50%;overflow:auto;">
            页面主内容区
        </div>

        <div class="layui-col-md12 rpt-light"
             ondragover="allowDrop(event)"
             ondrop="drop(event)"
             style="height: 50%;overflow:auto;">
            页面主内容区
        </div>
    </div>
</script>